<template>
    <div class="topic-display">
        <div class="left-column">
            <h2>专题列表</h2>
            <ul>
                <li v-for="(topic, index) in topics" :key="index" @click="selectTopic(index)"
                    :class="{ active: selectedTopicIndex === index }">
                    {{ topic.title }}
                </li>
            </ul>
        </div>
        <div class="right-column">
            <h2>{{ selectedTopic.title }}</h2>
            <div class="records">
                <div class="record" v-for="(record, recordIndex) in selectedTopic.records" :key="recordIndex">
                    <img :src="record.image" alt="Record Image" />
                    <p>{{ record.description }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            topics: [
                {
                    title: "专题一",
                    records: [
                        { description: "记录1 - 专题一", image: "path/to/image1.jpg" },
                        { description: "记录2 - 专题一", image: "path/to/image2.jpg" },
                    ],
                },
                {
                    title: "专题二",
                    records: [
                        { description: "记录1 - 专题二", image: "path/to/image3.jpg" },
                        { description: "记录2 - 专题二", image: "path/to/image4.jpg" },
                    ],
                },
            ],
            selectedTopicIndex: 0,
        };
    },
    computed: {
        selectedTopic() {
            return this.topics[this.selectedTopicIndex] || { title: "", records: [] };
        },
    },
    methods: {
        selectTopic(index) {
            this.selectedTopicIndex = index;
        },
    },
};
</script>

<style scoped>
.topic-display {
    display: flex;
    height: 100vh;
}

.left-column {
    width: 30%;
    background: #f4f4f4;
    padding: 10px;
    overflow-y: auto;
    border-right: 1px solid #ddd;
}

.left-column ul {
    list-style: none;
    padding: 0;
}

.left-column li {
    padding: 10px;
    cursor: pointer;
    transition: background 0.3s;
}

.left-column li:hover,
.left-column li.active {
    background: #ddd;
}

.right-column {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.records {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.record {
    width: calc(50% - 10px);
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

.record img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.record p {
    margin-top: 10px;
    font-size: 14px;
    color: #333;
}
</style>